<template>
  <el-row :gutter="8" class="account-settings">
    <el-col :lg="8" :md="8" :xl="6" class="settings-left-menu hidden-xs-only">
      <el-card class="content-card left-menu-card">
        <template #header>
          <span>个人设置</span>
        </template>
        <div class="left-menu">
          <div v-for="item in menuList"
               :key="item.name"
               :class="[ 'left-menu-item',{ selected: menuSelected === item.name },]"
               @click="menuSelected = item.name">
            {{ item.label }}
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :lg="16" :md="16" :sm="24" :xl="18">
      <el-card class="content-card settings-content-card">
        <el-tabs v-model="menuSelected" class="hidden-sm-and-up settings-top-menu">
          <el-tab-pane v-for="item in menuList"
                       :key="item.name"
                       :label="item.label"
                       :name="item.name">
          </el-tab-pane>
        </el-tabs>
        <div class="settings">
          <div class="settings-title">{{ labelSelected }}</div>
          <!-- 基本设置 -->
          <Base v-show="menuSelected === 'base'" :userInfo="userStore"/>
          <!-- 安全设置 -->
          <Security v-show="menuSelected === 'security'"/>
          <!-- 账号绑定 -->
          <Binding v-show="menuSelected === 'binding'"/>
          <!-- 新消息通知 -->
          <Notification v-show="menuSelected === 'notification'"/>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import Base from './components/base.vue';
import Security from './components/security.vue';
import Binding from './components/binding.vue';
import Notification from './components/notification.vue';
import { useUserStore } from '@/store';

defineOptions({name: 'UserSettings',});

const menuList: { label: string; name: string }[] = [
  {label: '基本设置', name: 'base'},
  //{label: '安全设置', name: 'security'},
  //{label: '账号绑定', name: 'binding'},
  //{label: '新消息通知', name: 'notification'},
];
const menuSelected = ref<string>('base');
const userStore = useUserStore();

const labelSelected = computed(() => {
  return menuList.find((item) => menuSelected.value === item.name)?.label;
});
</script>

<style lang="scss" scoped>
.account-settings {
  .left-menu-card {
    .el-card__header {
      font-size: 16px;
      color: var(--el-text-color-primary);
    }

    :deep(.el-card__body) {
      padding: 0;
    }

    .left-menu {
      padding: 12px 0;

      .left-menu-item {
        padding: 0 24px 0 16px;
        margin: 4px;
        white-space: nowrap;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        border-radius: 6px;

        &:hover {
          background-color: var(--el-color-info-light-9);
        }

        &.selected {
          color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
        }
      }
    }
  }

  .settings-content-card {
    :deep(.el-card__body) {
      padding-top: 3px;
    }

    .settings-top-menu {
      :deep(.el-tabs__header) {
        margin-bottom: 3px;
      }
    }

    .settings {
      .settings-title {
        font-size: 20px;
        margin: 12px 0 16px 0;
      }
    }
  }
}
</style>
